Sidebarnav #750
Sidebarnav #750
Conversation
There was a problem hiding this comment.
I left a review of the details. Overall nice work!
When I test it, here's what I see:
We seem to have lost the 100% width styling on the sidebar entries.
Also, there is a strange purple highlight over what looks like a parent div when I click. That does not look that good. Perhaps it could be made to match the border radius of the entries.
Also, how do I navigate through the files with the keyboard? I found that if I click on one, then use the arrow keys, it does not work as expected. I would expect the arrow keys to select between files, but it does not. I'm curious what interactions you are using to test this. Thanks!
| } | ||
|
|
||
| .list li:nth-child(2n) { | ||
| background: var(--spectrum-alias-highlight-hover); |
There was a problem hiding this comment.
Where is the --spectrum-alias-highlight-hover definition coming from? Did you verify that this resolves correctly? We may need a CSS import to make this work.
| @@ -94,6 +100,48 @@ export const VZSidebar = ({ | |||
| handleDrop, | |||
| } = useDragAndDrop(); | |||
|
|
|||
| function List(props) { | |||
| let state = useListState(props); | |||
There was a problem hiding this comment.
The style of this codebase prefers const over let. Please prefer const where possible. Thanks!
| aria-label="Example List" | ||
| selectionMode="multiple" | ||
| selectionBehavior="replace" | ||
| onAction={(key) => handleFileDoubleClick(key)} |
There was a problem hiding this comment.
I think this one can be simplified.
| onAction={(key) => handleFileDoubleClick(key)} | |
| onAction={handleFileDoubleClick} |
Scrolling sidebar files with keyboard